<template>
  <div class="seven_content myStyle">
    <div class="content_center">
      <!-- <div class="title_box">
        <div class="top">
          <div class="border"></div>
          <span>统计分析 </span>
        </div>
      </div> -->
      <div class="echartsBox">
        <!-- 01设备维修档案 -->
        <StrokeTitle4 :isCenter="true" title="设备维修档案" class="title_box_bc" style="width: 49.5%; height: 31.5%">
          <div class="flex_center" slot="select">
            <ElementRadio v-model="model" :isButton="true" @change="radioChange1" />
          </div>
          <div class="flex_center Echarts" slot="content">
            <XRow :data="data1" barRight="15%" barLeft="13%" barWidth="6" xUnit="件"></XRow>
          </div>
        </StrokeTitle4>
        <!-- 02故障来源 -->
        <StrokeTitle4 :isCenter="true" title="维修来源" class="title_box_bc" style="width: 49.5%; height: 31.5%">
          <div class="flex_center" slot="select">
            <ElementRadio v-model="model" :isButton="true" @change="radioChange2" />
          </div>
          <div class="flex_center Echarts" slot="content">
            <!-- <PieImg style="width: 100%" :data="data5" itemWidth="0.94" legendLabel="小时" cirLeft="1.12" legendLeft="54%" cirTop="0.85" legendHeight="64%" length="5" :img="require('@/assets/images/echarts/30@2x.png')" /> -->
            <PieImg3 :data="data2" :color="['#00ebcd','rgba(35, 195, 255, 1)']" :isLenged="false" :showLabel="false" length="2" itemWidth="0.94" cirLeft="1.55" legendLeft="0" :img="require('@/assets/images/echarts/30.png')" class="center2" />

            <div class="jxb_right flex_center" v-if="data2.length>0">
              <div class="left">
                <div class="big_cir flex_center" v-if="data2.length > 0">
                  <div class="small_cir"></div>
                </div>
                <div class="and" v-if="data2.length > 1"></div>
                <div class="big_cir flex_center big_cir_blue" v-if="data2.length > 1">
                  <div class="small_cir small_cir_blue"></div>
                </div>
              </div>
              <div class="right">
                <div class="item flex_between" v-for="(item, index) in data2" :key="index" v-show="index < 2" :class="index == 1 ? 'item_blue' : ''">
                  <div class="title">
                    {{ item.name }}
                  </div>
                  <div class="number">{{ item.value }}次</div>
                </div>
              </div>
            </div>
          </div>
        </StrokeTitle4>
        <!-- 03维修时长统计分析 -->
        <StrokeTitle4 :isCenter="true" title="维修时长统计分析" class="title_box_bc" style="width: 49.5%; height: 31.5%">
          <div class="flex_center" slot="select">
            <ElementRadio v-model="model" :isButton="true" @change="radioChange3" />
          </div>
          <div class="flex_center Echarts" slot="content">
            <div class="lt">
              <PieImg4 :data="data3.resultData" :allNum="data3.allNum" :tooltipShow="false" :isLenged="false" titleLabel="总时长(时)" unit="" legendLeft="0%" length="3" itemWidth="0.74" :img="require('@/assets/images/echarts/jishiqi.png')" :color="['#23c3ff', '#ffff00', '#ff3aea']" />
            </div>
            <div class="rt" v-if="data3.resultData.length>0">
              <div class="rt_top">其中最长维修时间</div>
              <div class="rt_center"></div>
              <div class="clzdjd_box">
                <div class="clzdjd_item flex_center" v-for="(item, index) in data3.resultData" :key="index">
                  <div class="clzdjd_item_left flex_between">
                    <!-- 左侧圆球 -->
                    <div class="bigCir flex_center">{{ index + 1 }}</div>
                    <!-- 竖线 -->
                    <div class="border"></div>
                    <!-- 小圆 -->
                    <div class="smallCir flex_center">
                      <div></div>
                    </div>
                  </div>
                  <el-tooltip class="item" effect="light" :content="item.name" placement="top-start">
                    <div class="clzdjd_item_right flex_center">
                      <div class="day">{{ item.resultTime || "- -" }}</div>
                      <div class="day_num">{{ item.value || "- -" }}小时</div>
                    </div>
                  </el-tooltip>
                </div>
              </div>
            </div>
          </div>
        </StrokeTitle4>
        <!-- 04误报占比分析 -->
        <StrokeTitle4 :isCenter="true" title="误报占比分析" class="title_box_bc" style="width: 49.5%; height: 31.5%">
          <div class="flex_center PieGauge_box" slot="content">
            <PieGauge3 class="item PieGauge3 PieGauge" label="当月" :data="data4a" />
            <PieGauge3 class="item PieGauge2 PieGauge" label="当季" :data="data4b" />
            <PieGauge3 class="item PieGauge1 PieGauge" label="当年" :data="data4c" />
          </div>
        </StrokeTitle4>
        <!-- 05故障类型分析 -->
        <StrokeTitle4 :isCenter="true" title="故障类型分析" class="title_box_bc" style="width: 49.5%; height: 31.5%">
          <div class="flex_center" slot="select">
            <ElementRadio v-model="model" :isButton="true" @change="radioChange5" />
          </div>
          <div class="Echarts flex_center" slot="content">
            <PieImg3 style="width: 100%" :data="data5" itemWidth="0.94" cirLeft="1.12" legendLeft="54%" legendLabel="次" cirTop="0.85" legendHeight="64%" length="5" :img="require('@/assets/images/echarts/31.png')" />
          </div>
        </StrokeTitle4>
        <!-- 06故障次数统计 -->
        <StrokeTitle4 :isCenter="true" title="故障次数统计" class="title_box_bc" style="width: 49.5%; height: 31.5%">
          <div class="flex_center" slot="select">
            <ElementRadio v-model="model" :isButton="true" @change="radioChange6" />
          </div>
          <div class="flex_center Echarts" slot="content">
            <div class="lt">
              <PieImg4 :data="data6.eqpList" :allNum="data6.allNum" :isLenged="false" titleLabel="总次数(次)" unit="" legendLeft="0%" length="3" itemWidth="0.7" cirLeft="0.05" titleLeft="2.5%" :img="require('@/assets/images/echarts/jishiqi.png')" :color="['#23c3ff', '#ffff00', '#ff3aea']" />
            </div>
            <div class="rt" v-if="data6.eqpList.length>0">
              <div class="rt_top">设备占比</div>
              <div class="rt_center"></div>
              <div class="clzdjd_box">
                <div class="clzdjd_item flex_center" v-for="(item, index) in data6.eqpList" :key="index">
                  <div class="clzdjd_item_left flex_between">
                    <!-- 左侧圆球 -->
                    <div class="bigCir flex_center">{{ index + 1 }}</div>
                    <!-- 竖线 -->
                    <div class="border"></div>

                    <!-- 小圆 -->
                    <div class="smallCir flex_center">
                      <div></div>
                    </div>
                  </div>
                  <div class="clzdjd_item_right flex_center">
                    <div class="day">设备：{{item.name||'- -'}}</div>
                    <div class="day_num">{{item.value|| '- -'}}次</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </StrokeTitle4>
      </div>
    </div>
  </div>
</template>

<script>
import StrokeTitle4 from "@/components/myComponents/stroke/title4.vue";
import PieGauge3 from "@/components/echarts/pie/gauge3.vue";
import PieImg4 from "@/components/echarts/pie/img4.vue";
import PieImg3 from "@/components/echarts/pie/img3.vue";
import {
  SelectFaultTypeNum,
  SelectFaultNum,
  SelectEqpFaultNum,
} from "@/api/equipment/index.js";
import {
  FaultSourceNum,
  SelectFalseAlarmRatio,
  FaultTime,
} from "@/api/report/echarts.js";
export default {
  components: {
    StrokeTitle4,
    PieImg4,
    PieImg3,
    PieGauge3,
  },
  name: "ReportEcharts",
  data() {
    return {
      model: "month",
      // 01设备维修档案
      data1: [],
      data1Form: {
        beginTime: this.$getMonth("s", 0) + " 00:00:00 ",
        endTime: this.$getMonth("e", 0) + " 23:59:59 ",
        deptId: 101,
      },
      // 02故障来源
      data2: [],
      //故障来源表单
      data2Form: {
        beginTime: this.$getMonth("s", 0) + " 00:00:00 ",
        endTime: this.$getMonth("e", 0) + " 23:59:59 ",
        deptId: 101,
      },
      // 03维修时长统计来源
      data3: [
        { name: "码垛机", value: 77 },
        { name: "码垛机2", value: 88 },
        { name: "码垛机3", value: 122 },
      ],
      // 维修时长统计分析
      data3: {
        resultData: [],
      },
      //维修时长统计分析表单
      data3Form: {
        beginTime: this.$getMonth("s", 0) + " 00:00:00 ",
        endTime: this.$getMonth("e", 0) + " 23:59:59 ",
        deptId: 101,
      },
      // 04误报占比分析//当月
      data4a: { allNum: 0, falseAlarmRatio: 0 },
      //误报占比表单//当月
      data4aForm: {
        beginTime: this.$getMonth("s", 0) + " 00:00:00 ",
        endTime: this.$getMonth("e", 0) + " 23:59:59 ",
        deptId: 101,
      },
      // 04误报占比分析//当季
      data4b: { allNum: 0, falseAlarmRatio: 0 },
      //误报占比表单//当季
      data4bForm: {
        beginTime: this.$getQuarterMonth("s", 0) + " 00:00:00 ",
        endTime: this.$getQuarterMonth("e", 0) + " 23:59:59 ",
        deptId: 101,
      },
       data4cForm: {
        beginTime: null,
        endTime: null,
        deptId: 101,
      },
      // 04误报占比分析//全部
      data4c: { allNum: 0, falseAlarmRatio: 0 },
      // 05故障类型分析
      data5: [],
      //故障类型分表单
      data5Form: {
        beginTime: this.$getMonth("s", 0) + " 00:00:00 ",
        endTime: this.$getMonth("e", 0) + " 23:59:59 ",
        deptId: 101,
      },
      //故障次数统计
      data6: {
        eqpList: [],
      },
      //故障次数统计表单
      data6Form: {
        beginTime: this.$getMonth("s", 0) + " 00:00:00 ",
        endTime: this.$getMonth("e", 0) + " 23:59:59 ",
      },
      color: ["blue", "orange", "green", "pink", "yellow", "red"],
    };
  },
  activated() {
    //故障类型分析
    this.selectFaultTypeNum();
    //故障次数统计
    this.selectFaultNum();
    //维修时长统计分析
    this.faultTime();
    //设备维修档案
    this.selectEqpFaultNum();
    //故障来源统计
    this.faultSourceNum();
    //误报占比分析//当月
    this.selectFalseAlarmRatioa();
    //误报占比分析//当季
    this.selectFalseAlarmRatiob();
    //误报占比分析//全部
    this.selectFalseAlarmRatioc();
  },
  methods: {
    radioChange() {},
    //设备维修档案
    selectEqpFaultNum() {
      SelectEqpFaultNum(this.data1Form).then((res) => {
        this.data1 = res;
      });
    },
    //设备维修档案时间切换
    radioChange1(event) {
      this.data1Form.beginTime = event[0] + " 00:00:00";
      this.data1Form.endTime = event[1] + " 23:59:59";
      this.selectEqpFaultNum();
    },
    //故障来源统计
    faultSourceNum() {
      FaultSourceNum(this.data2Form).then((res) => {
        if (res.code == 200) {
          if (res.data.length > 2) {
            res.data = res.data.slice(0, 2);
          }
          this.data2 = res.data;
        }
      });
    },
    //故障来源统计切换时间
    radioChange2(event) {
      this.data2Form.beginTime = event[0] + " 00:00:00";
      this.data2Form.endTime = event[1] + " 23:59:59";
      this.faultSourceNum();
    },
    //维修时长统计分析
    faultTime() {
      FaultTime(this.data3Form).then((res) => {
        if (res.code == 200) {
          if (res.data.resultData.length > 3) {
            res.data.resultData = res.data.slice(0, 3);
          }
          for (let item of res.data.resultData) {
            item.resultTime = item.resultTime.slice(0, 10);
          }
          this.data3 = res.data;
        }
      });
    },
    //维修时长统计分析时间切换
    radioChange3(event) {
      this.data3Form.beginTime = event[0] + " 00:00:00";
      this.data3Form.endTime = event[1] + " 23:59:59";
      this.faultTime();
    },
    //误报占比分析//当月
    selectFalseAlarmRatioa() {
      SelectFalseAlarmRatio(this.data4aForm).then((res) => {
        if (res.code == 200) {
          this.data4a = res.data;
        }
      });
    },
    //误报占比分析//当季
    selectFalseAlarmRatiob() {
      SelectFalseAlarmRatio(this.data4bForm).then((res) => {
        if (res.code == 200) {
          this.data4b = res.data;
        }
      });
    },
    //误报占比分析//当年
    selectFalseAlarmRatioc() {
      var now = new Date();
      this.data4cForm.beginTime= now.getFullYear()+ "-01-01 00:00:00"
      this.data4cForm.endTime= now.getFullYear()+ "-12-31 23:59:59"
      SelectFalseAlarmRatio(this.data4cForm).then((res) => {
        if (res.code == 200) {
          this.data4c = res.data;
        }
      });
    },
    //故障类型分析
    selectFaultTypeNum() {
      SelectFaultTypeNum(this.data5Form).then((res) => {
        this.data5 = res;
      });
    },
    //故障类型分析时间切换
    radioChange5(event) {
      this.data5Form.beginTime = event[0] + " 00:00:00";
      this.data5Form.endTime = event[1] + " 23:59:59";
      this.selectFaultTypeNum();
    },
    //故障次数统计
    selectFaultNum() {
      SelectFaultNum(this.data6Form).then((res) => {
        if (res.eqpList.length > 3) {
          res.eqpList = res.data.slice(0, 3);
        }
        this.data6 = res;
      });
    },
    //故障次数统计切换时间
    radioChange6(event) {
      this.data6Form.beginTime = event[0] + " 00:00:00";
      this.data6Form.endTime = event[1] + " 23:59:59";
      this.selectFaultNum();
    },
  },
};
</script>


<style lang="scss" scoped>
.lt {
  width: 300px;
  height: 150px;
  // margin-left: 20px;
  position: relative;
  left: -3%;
}
.rt {
  width: 300px;
  height: 130px;
  // background-color: #ccc;
  .rt_top {
    position: absolute;
    font-size: 13px;
    margin: 5px 0px 3px 5px;
    z-index: 1;
    top: 36%;
    color: white;
    letter-spacing: 1px;
  }
  .rt_center {
    top: 36%;
    position: absolute;
    width: 120px;
    height: 14px;
    background-image: url("~@/assets/images/echarts/33_bc.png");
    background-size: 100% 100%;
    z-index: 0;
    margin: 13px 0px 3px 0px;
  }
  .clzdjd_box {
    width: 100%;
    height: 80%;
    margin-top: 9%;
    // max-height: 350px;

    .clzdjd_item {
      height: 100%;
      height: 25%;
      margin: 0 0px 10px 0;
      .clzdjd_item_left {
        width: 13%;
        height: 100%;
        max-width: 385px;
        max-height: 124px;
        position: relative;
        .bigCir {
          width: 25px;
          height: 25px;
          margin-right: 1px;
          // background: url("../../assets/images/echarts/yuanquan.png");
          background: url(/static/img/yuanquan.121f7179.png);
          background-size: 100% 100%;
          color: #ffffff;
          text-align: center;
          line-height: 25px;
          font-size: 10px;
        }
        .index {
          position: absolute;
          color: #ffffff;
          left: 0;
          right: 0;
          bottom: 0;
          top: 0;
          margin: auto;
        }
        .border {
          width: 1px;
          height: calc(100% + 14px);
          background: #42a9ff;
          position: absolute;
          right: 0;
          top: 50%;
        }
        .smallCir {
          width: 13px;
          height: 13px;
          background: rgba(66, 169, 255, 0.3);
          border-radius: 50%;
          position: relative;
          left: 5px;
          div {
            width: 7px;
            height: 7px;
            background: #42a9ff;
            border-radius: 50%;
          }
        }
      }
      .clzdjd_item_right {
        width: 66%;
        height: 100%;
        margin-left: 6%;
        max-width: 435px;
        max-height: 124px;
        background: linear-gradient(
          180deg,
          rgba(44, 119, 187, 0.6) 0%,
          rgba(18, 81, 141, 0.6) 100%
        );
        border: 1px solid rgba(52, 134, 218, 0.6);
        // background: red;
        .day {
          width: 50%;
          height: 100%;
          background: red;
          color: white;
          font-size: 13px;
          line-height: 26px;
          text-align: center;
          background: url("../../../assets/images/echarts/ju.png");
          background-size: 100% 100%;
        }
        .day_num {
          width: 50%;
          height: 100%;
          background-color: rgba(36, 104, 160, 0.5);
          font-size: 13px;
          text-align: center;
          color: #3bffe6;
          text-shadow: 1px 0px 3px #3bffe6;
          line-height: 26px;
        }
      }
    }
    .clzdjd_item:last-child .border {
      width: 0 !important;
    }
  }
  .bottom {
    width: 100%;
    height: 41.6%;
  }
  @media screen and (max-width: 1000px) {
    .rt_center {
      top: 22% !important;
    }
    .rt_top {
      top: 22% !important;
    }
  }
}
.echarts_box[data-v-d80da0fe] {
  width: 25%;
}
.title_box_bc {
  // border: 1px solid rgba(0, 156, 255, 0.3);
  box-shadow: 0 0 3px 3px rgb(52 112 167 / 90%);
  // margin: 0px 19px;
  // margin-bottom: 1%;
}
.calculagraph_right,
.calculagraph_left {
  width: 50%;
  height: 100%;
  // background: red;
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
  float: left;
  margin-left: 1%;
}
.calculagraph_right {
  align-items: flex-start;
  justify-content: center;
  width: 26%;
  height: 90%;
  // height: 200px;
  margin-left: 0%;
}

.seven_content {
  z-index: 10;
  // background: red;
  width: 100%;
  height: 100%;
  overflow: auto;

  .content_center {
    //  background: yellow;
    //   background: red;
    width: 100%;
    height: 100%;
    // overflow: hidden;
    .title_box {
      position: relative;
      // margin-bottom: 1%;
      // margin-bottom: 10px;
      .top {
        // height: 40px;
        height: 35px;
        width: 100%;
        border-bottom: 1px solid #2a8cf04a;
        display: flex;
        padding: 0 15px;
        align-items: center;
        // margin-bottom: 10px;
        .border {
          width: 3px;
          height: 16px;
          background: #06ffff;
        }
        span {
          font-size: 16px;
          font-family: Adobe Heiti Std, Adobe Heiti Std-R;
          font-weight: R;
          text-align: left;
          margin-left: 10px;
          color: #ffffff;
        }
      }
    }
  }
  .content_center {
    .echartsBox {
      width: 100%;
      // height: 100%;
      height: 96.5%;
      // background: red;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      // padding: 0.8% 0.8% 0.5%;
      padding: 0.8% 0.8% 0.5%;
      .jxb_right {
        width: 35%;
        position: relative;
        left: -7%;
        .left {
          display: flex;
          flex-direction: column;
          align-items: center;
          .big_cir {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: 1px solid #086088;
            .small_cir {
              width: 10px;
              height: 10px;
              border-radius: 50%;
              border: 2px solid #02d5c2;
            }
          }
          .big_cir_blue {
            border: 1px solid #105b95;
            .small_cir_blue {
              border: 2px solid #1c9ad5;
            }
          }
          .and {
            width: 2px;
            height: 20px;
            margin: 8px 0;
            background: -moz-linear-gradient(top, #02d5c2 0%, #1c9ad5 100%);
            background: -webkit-gradient(
              linear,
              left top,
              left bottom,
              color-stop(0%, #02d5c2),
              color-stop(100%, #1c9ad5)
            );
            background: -webkit-linear-gradient(top, #02d5c2 0%, #1c9ad5 100%);
            background: -o-linear-gradient(top, #02d5c2 0%, #1c9ad5 100%);
            background: -ms-linear-gradient(top, #02d5c2 0%, #1c9ad5 100%);
            background: linear-gradient(to bottom, #02d5c2 0%, #1c9ad5 100%);
          }
        }
        .right {
          .item {
            width: 150px;
            height: 35px;
            border: 1px solid #086088;
            margin: 22px 10px;
            padding: 0 20px;
            .title,
            .number {
              font-size: 13px;
              color: #00ebcd;
            }
            .number {
              font-weight: 700;
            }
          }
          .item_blue {
            border: 1px solid #105b95;
            .title,
            .number {
              color: rgba(35, 195, 255, 1);
            }
          }
        }
      }
    }
  }
  .Echarts {
    height: calc(100% - 50px);
  }
  @media screen and (max-width: 1000px) {
    .Echarts {
      height: 100%;
    }
    .content_center {
      // overflow: auto !important;
      overflow-x: hidden;
      //  height: calc(100% - 30px);
      .echartsBox {
        height: 100%;
      }
    }
  }
  .PieGauge_box {
    height: 100%;
    display: flex;
    align-items: center;
    //  margin-top:10px;
  }

  .center2 {
    // width: 320px;
    // margin-right: 80px;
    // background: red;

    width: 40%;
  }
  .center_echarts {
    height: 180px;
  }
}
</style>
